<template>
  <div class="draggable-search" :style="{ backgroundColor }">
    <a-input-search
      class="input-search-disabled"
      :class="{ radius: borderRadius }"
      disabled
      placeholder="搜索商品"
      :style="{ color: textColor, textAlign, height: `${height}px`, backgroundColor: borderBackgroundColor }"
      :value="placeholder && placeholder[0]"
    >
      <a-icon slot="prefix" type="search" :style="{ color: textColor}" />
    </a-input-search>
  </div>
</template>
<script>
  export default {
    name: 'DraggableSearch',
    inheritAttrs: false,
    props: {
      placeholder: {
        type: Array,
        default: function () {
          return []
        }
      },
      textAlign: {
        type: String,
        default: 'left'
      },
      borderRadius: {
        type: Boolean,
        default: false
      },
      height: {
        type: Number,
        default: 40
      },
      backgroundColor: {
        type: String,
        default: '#F9F9F9'
      },
      borderBackgroundColor: {
        type: String,
        default: '#FFFFFF'
      },
      textColor: {
        type: String,
        default: '#969799'
      }
    },
    data () {
      return {
        type: 'search'
      }
    }
  }
</script>

<style lang="less">
  .draggable-search {
    padding: 5px 28px;
    box-sizing: border-box;
    width: 100%;
    .input-search-disabled {
      &.radius {
        border-radius: 25px;
      }
      .ant-input[disabled] {
        background-color: transparent !important;
        cursor: pointer;
        color: inherit;
        height: inherit;
        border: none;
      }
      .ant-input-suffix {
        display: none;
      }
    }
  }
</style>
